<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>孙玉超个人博客-Java技术研究</title>
    <meta name="Description" content="孙玉超个人博客是一个分享、研究Java技术的自媒体博客。Java技术栈的学习之路，我和你一起行走！" />
    <meta name="Keywords" content="孙玉超个人博客,个人博客,孙玉超" />
    <link href="https://www.sunyuchao.com/static/css/fontawesome4.7.0/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/css/animate.css">
    <script th:src="${iconfontUrl}"></script>

    <link href="https://www.sunyuchao.com/static/layui/css/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.sunyuchao.com/static/css/common.css">

    <link rel="icon" type="image/x-icon" href="https://www.sunyuchao.com/static/images/favicon.ico">
    <link rel="stylesheet" th:if="${enableLantern}" href="https://www.sunyuchao.com/static/css/lantern.css"> <!--灯笼特效样式-->
    <style>


        /*轮播*/
         .syc{width: 62%;height: 300px;margin: 0 auto;margin-top: 20px;}

         .syc .syc-left{width: 20%;height: 300px;float: left;}
         .syc .syc-left h3{padding: 5px;border-left: 3px solid blueviolet;margin-bottom: 10px;color: #89919a;}
        .syc .syc-left a{position: relative;display: block;margin-top: 10px;padding: 10px;background-color: white;}
        .syc .syc-left a div{overflow: hidden;}
        .syc .syc-left a:first-child{margin-top: 0;}
        .syc .syc-left img,.syc .syc-left div{border-radius: 5px;transition: transform 1s ;
            width: 100%;
            height: 125px;

            -moz-transition: transform 1s ;
            -webkit-transition: transform 1s;
            -o-transition: transform 1s ;}
        .syc .syc-left a:hover img{
            transform: scale(1.1);
        }
        .syc .syc-left span{position: absolute;top: 40%;text-align: center;line-height: 24px;height: 48px;    padding: 0 40px;
        bottom: 0;left: 0;right: 0;color:white;font-size: 15px;
        }
        .syc .syc-center{background-color: white;margin:0 10px;float: left;width: 49.2%;height: 280px;padding: 10px;}


         /*我的名片*/
        .syc .syc-right{float: right;width: 27%;height: 300px;
            background-color: white;border-radius: 5px;position: relative;
        }

        .syc .syc-right p{font-size: 12px;padding: 0 0 0 20px;line-height: 28px;font-style: normal;}
        .syc .syc-right h2 {    font-size: 22px;margin: 10px;color: #89919a;font-weight: normal;padding-bottom: 10px;}
        .card-contact{margin: 15px;}
        .card-contact li {   width: 25%;float: left;height: 60px; text-align: center;line-height: 60px;}
        .card-contact li i{font-size: 50px;transition: opacity 1s}
        .card-contact li i:hover{opacity: 0.5;}

        .content{width: 62%;margin: 0 auto;margin-top: 20px;}
        .content .content-left{float: left;width: 72%;position: relative;}
        #select{position: absolute;top: 0;right: 0;padding: 5px;font-size: 15px;}
        .content .content-left .pick li{margin: 0 10px;float: left;}
        .content .content-left > h2{padding: 5px;border-left: 3px solid blueviolet;margin-bottom: 10px;color:#89919a;font-weight: 600;font-size: 20px;}
        .content .content-right{float: right;width: 27%;}
        .content-right .square{padding: 5px;margin:0 auto;margin-bottom: 10px;position: relative;border-bottom: 1px solid #e7e7e7;
            padding-bottom: 15px;width: 90%;padding-top: 12px;font-weight: bold;}
        .content-right .flex{width: 96%;margin: 0 auto;}
        .content-right .flex li{margin:3px;width: 31%;height: 80px;line-height: 80px;text-align: center; }
        .content-right .flex li a{display: block;color: white;background-color: rgba(255,255,255,0.2);
            transition: All 2s ease;
            -webkit-transition: All 2s ease;
            -moz-transition: All 2s ease;
            -o-transition: All 2s ease;}
        .content-right .flex li a:hover{
            rgba(255,255,255,0.2)
            -webkit-transform:rotate(360deg) ;
            -moz-transform:rotate(360deg)  ;
            -ms-transform:rotate(360deg)  ;
            -o-transform: rotate(360deg) ;
            transform: rotate(360deg) ;}
        .content-right .square::after {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 2.5px!important;
            width: 100px;
            background-color: #51aded;
            content: '';
            transition:width 1s;
            -moz-transition:width 1s; /* Firefox 4 */
            -webkit-transition:width 1s; /* Safari and Chrome */
            -o-transition:width 1s; /* Opera */
        }

        .content-right .friend{width: 100%;height: inherit;padding-bottom: 10px;}
        .content-right .friend li{float: left;margin:6px 3px;width: 31%;height: 20px;line-height: 20px;text-align: center; }
        .content-right .friend li a{color:#999;}
        .content-right .right-card{margin-top: 20px;background-color: white;padding-bottom: 30px;}
        .right-card .introduction{padding:0 10px;color: #999;}
       /*鼠标悬停div修改子元素样式*/
        .content-right > div:hover .square:first-child::after{
            width: 200px;
        }

        /*文章列表*/
        .article{width: 99%;height: 215px;background-color: white;
            margin-bottom: 10px;
            position: relative;
            border-left: 5px solid transparent;
            transition: box-shadow 1s,border-left 1s;
            -moz-transition: box-shadow 1s,border-left 1s;
            -webkit-transition: box-shadow 1s,border-left 1s;
            -o-transition: box-shadow 1s,border-left 1s;

        }
        .article header h3{display: inline;}
        .article header>span{background-color: #51aded;padding: 3px 8px;color: white;font: 14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;}
        .article header i{margin-left: -6px;color: #51aded;}
        header{margin-left: 20px;padding: 20px 0 14px 0;}
        header a{color: #000;}
        header a:hover{color: #000}
        .article:hover{
            box-shadow: #ccc 1px 1px 4px 4px;
            border-left: 5px solid cornflowerblue;
        }

        .picture{
            transition: transform 1s ;
            -moz-transition: transform 1s ;
            -webkit-transition: transform 1s;
            -o-transition: transform 1s ;
        }
        .article:hover .picture{
            transform: scale(1.1);
        }

        .focus{float: left; width: 220px;margin-left: 20px;}

        .note{color: #526163;line-height: 24px;font-style: normal;margin-right: 20px;font-size: 14px;
            text-overflow:ellipsis;overflow: hidden;display: -webkit-box;
            -webkit-line-clamp: 5;
            text-indent: 2em;
            -webkit-box-orient: vertical;
        }
        .focus-a{overflow: hidden;width: 200px;height: 123px;display: block}


        .auth-span{position: absolute;right: 0;display: block;bottom: 0;margin-bottom: 10px;}
        .muted{ font-size: 13px;    margin-right: 20px;    color: #999;}
        .muted a{ color: #00a67c;}
        .muted .fa{ font-size: 1.23em;}


        /*最新公告*/
        .notice li{padding: 8px 15px 6px 25px;border-radius: 4px;margin-top: 8px;margin-left: 10px;position: relative;width: 80%;transition: all .5s}
        .notice li:hover{box-shadow: 0 0 10px blue;}
        .notice li:before {
            position: absolute;
            content: "";
            width: 3px;
            height: 3px;
            background: #000;
            border-radius: 50%;
            left: 10px;
            top: 17px;
        }
        .notice li span{float: right;margin-right: 5px;}
        .notice li a{display: inline-block;text-overflow:ellipsis;width: 65%;overflow: hidden;white-space:nowrap;}



        /*修改动画框架的动画时间*/
        .animated {
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
        }
        /*轮播*/
        #gal {  position:relative;  width:100%;  height:280px;  margin:0 auto;  background:white;          -webkit-transform:translate3d(0, 0, 0);  -moz-transform:   translate3d(0, 0, 0);  -ms-transform:    translate3d(0, 0, 0);  -o-transform:     translate3d(0, 0, 0);  transform:        translate3d(0, 0, 0);}
        #gal:after {  content:'';  position:absolute;  bottom:24px;  right:0;  left:0;  width:100%;  height:2px;  background:rgba(255,255,255,0.35);  z-index:3;}

        input[type="radio"], input[type="radio"] + label {  position:absolute;  bottom:15px;  display:block;  width:20px;  height:20px;  -webkit-border-radius:50%;  -moz-border-radius:50%;  border-radius:50%;  cursor:pointer;}
        input[type="radio"] {  opacity:0;  z-index:9;}
        input[value="one"], input[value="one"] + label {left:20px;}
        input[value="two"], input[value="two"] + label {left:128px;}
        input[value="three"], input[value="three"] + label {left:236px;}
        input[value="four"], input[value="four"] + label {left:344px;}
        input[value="five"], input[value="five"] + label {left:452px;}
        input[value="six"], input[value="six"] + label {right:20px;}
        input[type="radio"] + label {  background:rgba(255,255,255,0.35);
            z-index:7;  -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
            -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
            box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);  -webkit-transition:all .3s;
            -moz-transition:all .3s;  -o-transition:all .3s;  transition:all .3s;}
        [class*="entypo-"]:before {  position:absolute;  font-family: 'entypo', sans-serif;}
        figure[class*="entypo-"]:before {  left:10px;  top:5px;  font-size:2rem;  color:rgba(255,255,255,0);  z-index:1;
            -webkit-transition:color .1s;  -moz-transition:color .1s;  -o-transition:color .1s;  transition:color .1s;}
        a[class*="entypo-"]:before {  top:8px;  left:9px;  font-size:1.5rem;  color:white;}
        a:hover[class*="entypo-"]:before {  color:white;}
        figure, figure img, figcaption {  position:absolute;  top:0;  right:0;}
        figure {  bottom:0;  left:0;  width:100%;  height:280px;  display:block;  overflow:hidden;}
        figure img {  bottom:0;  left:0;  display:block;  width:600px;  height:300px;  z-index:1;  -webkit-transform:translateX(600px);  -moz-transform:translateX(600px);  -ms-transform:translateX(600px);  -o-transform:translateX(600px);  transform:translateX(600px);  -webkit-transition:all .15s .15s, z-index 0s;  -moz-transition:all .15s .15s, z-index 0s;  -o-transition:all .15s .15s, z-index 0s;  transition:all .15s .15s, z-index 0s;}
        figcaption {  display:block;  width:270px;  height:300px;  padding-top:20px;  background-image:radial-gradient(rgba( 255,255,255,0.3), transparent);  background-size:600px 600px;  background-repeat:no-repeat;  background-position:-300px -150px;  text-align:center;  z-index:3;  -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);  -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);  box-shadow:-5px 0px 20px rgba(0,0,0,0.1);  -webkit-transform:translateX(300px);  -moz-transform:translateX(300px);  -ms-transform:translateX(300px);  -o-transform:translateX(300px);  transform:translateX(300px);  -webkit-transition:all .35s;  -moz-transition:all .35s;  -o-transition:all .35s;  transition:all .35s;}h4 {  display:inline-block;  padding:0 15px;  color:white;  font-family: 'Titillium Web', sans-serif;  font-weight:300;  font-size:2rem;}
        figcaption p {  padding:50px 15px;  font-family:'Titillium Web', sans-serif;  font-weight:300;  color:#333;  background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));  background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);  background-size:1px 100%;  background-repeat:no-repeat;  background-position:50% 0%;}
        input[type="radio"]:hover + label {  background:rgba(255,255,255,0.6);}
        input[type="radio"]:checked + label {  background:rgba(255,255,255,1);  -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);  -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);  box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);}
        input[type="radio"]:checked + label:before {}
        input[type="radio"]:checked ~ figure img {  z-index:2;  -webkit-transform:translatex(0px);  -moz-transform:translatex(0px);  -ms-transform:translatex(0px);  -o-transform:translatex(0px);  transform:translatex(0px);  -webkit-transition:all .15s, z-index 0s;  -moz-transition:all .15s, z-index 0s;  -o-transition:all .15s, z-index 0s;  transition:all .15s, z-index 0s;}
        input[type="radio"]:checked ~ figure[class*="entypo-"]:before {  z-index:3;  color:rgba(255,255,255,0.5);  -webkit-transition:color .5s;  -moz-transition:color .5s;  -o-transition:color .5s;  transition:color .5s;}
        input[type="radio"]:checked ~ figure figcaption {  z-index:8;  -webkit-transform:translateX(0px);  -moz-transform:translateX(0px);  -ms-transform:translateX(0px);  -o-transform:translateX(0px);  transform:translateX(0px);  -webkit-transition:all .35s, .7s;  -moz-transition:all .35s, .7s;  -o-transition:all .35s, .7s;  transition:all .35s, .7s;}

        #login,#regist{color: #333;}


        /*图片点击*/
        .enlargeImg_wrapper {display: none;position: fixed;z-index: 999;top: 0;right: 0;bottom: 0;left: 0;background-repeat: no-repeat;background-attachment: fixed;background-position: center;background-color: rgba(52, 52, 52, 0.8);background-size: 50%;
        }
        .enlargeImg{position: absolute;top: 8px;right: 12px;border-radius: 50%;}
        .enlargeImg:hover {cursor: zoom-in;}
        .enlargeImg_wrapper:hover {cursor: zoom-out;}


        #selectCondition{width: 99.6%;background-color: white;
            position: relative;height: 350px;padding: 0 10px;
            box-sizing: border-box;margin-bottom: 10px;display: none;}

        #selectCondition .first-level-box,#selectCondition .child-level-box{float: left;}
        #selectCondition .first-level-box{margin-left: 16px;}
        #selectCondition .item{margin-top: 10px;}
        #selectCondition .child-level ul li{float: left;margin: 5px;}
        #selectCondition .first-level{width: 100px;}
        #selectCondition .child-level{float: left;margin-top: 5px;height: 300px;width: 180px;margin-left: 20px;}

        #selectCondition .adapter-no-child-normal{width: 85px;padding-right: 25px;}
        /*让英文字体好看,去掉微软雅黑*/
        #selectCondition button{font-family: Arial, Helvetica, sans-serif;}
        #title-search {padding-top: 10px;}
        #title-search .active{color: red;}
        #title-search a{margin-left: 20px;}
        .classify-active{background-color: red;}


        /*小屏幕 1366 x 768*/
        @media screen and (max-width: 1366px) {
            .content,.syc{
                width: 88%;
            }
        }


        /*手机*/
        @media screen and (max-width: 980px) {
            .syc,.content{width: 95%;}
            .syc .syc-left a{padding: 5px;}
            .syc .syc-center{padding: 5px;}
            .content-right .flex li{width: 30%;height: 70px;line-height: 70px;}
            .notice li a{width:55%;}

            #title-search a{font-size: 12px;}
            .content-right .friend li{width: 45%;}
            .right-card{max-height: 220px;overflow: hidden;}
            .right-card .introduction{font-size: 13px;}
            .right-card .introduction img{width: 60px;height: 60px;}
        }

    </style>
</head>
<body>
<!--灯笼-->
    <div th:if="${enableLantern}" class="lantern-box2">
        <div class="lantern">
            <div class="xian"></div>
            <div class="lantern-a">
                <div class="lantern-b"><div class="lantern-t">春</div></div>
            </div>
            <div class="weiba weiba-a"><div class="weiba-c"></div><div class="weiba-b"></div></div>
        </div>
    </div>

    <div th:if="${enableLantern}" class="lantern-box1">
        <div class="lantern">
            <div class="xian"></div>
            <div class="lantern-a">
                <div class="lantern-b"><div class="lantern-t">节</div></div>
            </div>
            <div class="weiba weiba-a"><div class="weiba-c"></div><div class="weiba-b"></div></div>
        </div>
    </div>

    <!--搜索-->
    <div th:fragment="search" class="search">
        <form>
            <input type="text" placeholder="装饰...">
            <button id="go" type="submit"></button>
        </form>
    </div>
    <!--右下角固定-->
    <div th:fragment="permanent" id="permanent">
        <ul>
            <li id="toTop"><a href="javascript:;"><i class="layui-icon layui-icon-top"></i></a></li>
            <li id="feedback"><a href="javascript:;"><i class="layui-icon layui-icon-edit"></i></a></li>
            <li id="share"><a href="javascript:;"><i class="layui-icon layui-icon-share"></i></a></li>
            <li><a href="tencent://message/?uin=1481232419&Site=&Menu=yes"><i style="color: blueviolet;" class="layui-icon layui-icon-login-qq"></i></a></li>
        </ul>
        <div id="share-div" style="display: none;width: 170px;">
            <span>分享到：&nbsp;</span>
            <a href="http://connect.qq.com/widget/shareqq/index.html?url=https://www.sunyuchao.com" target="_blank">
                <svg class="icon" style="font-size: 30px;" aria-hidden="true"><use xlink:href="#layui-extend-qq"></use></svg>
            </a>
            <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.sunyuchao.com" target="_blank">
                <svg class="icon" style="font-size: 30px;" aria-hidden="true"><use xlink:href="#layui-extend-qzone"></use></svg>
            </a>
            <a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://www.sunyuchao.com" target="_blank">
                <svg class="icon" style="font-size: 30px;" aria-hidden="true"><use xlink:href="#layui-extend-weibo"></use></svg>
            </a>
        </div>
    </div>
    <div class="top">
        <div class="top-center">
            <div class="top-center-l">
                <img width="130" height="78" th:src="${logoUrl}">
            </div>
            <div class="top-center-c">
                <ul class="nav">
                    <li class="nav-this"><a href="#">首&nbsp;&nbsp;页</a></li>
                    <li><a href="/learning">爱学习</a></li>
                    <li><a href="/life">微动态</a></li>
                    <li th:fragment="onlineutils"><a href="http://onlineutils.sunyuchao.com/">工具集</a></li>
                    <li><a href="/aboutme">关于我</a></li>
                    <li><a href="/message">留言板</a></li>
                </ul>
            </div>
            <div th:fragment="top-center-r" class="top-center-r">
                <span th:if="${session.loginUser == null }"><a id="login" href="javascript:;">登录</a> / <a id="regist" href="javascript:;">注册</a></span>
                <ul th:if="${session.loginUser != null }" class="layui-nav"> <!--登录之后显示-->
                    <li class="layui-nav-item">
                        <a href="javascript:;">
                            <img class="radius" width="50" height="50" th:src="${session.loginUser.avatar}">
                        </a>
                        <dl class="layui-nav-child"> <!-- 二级菜单 -->
                            <dd><a href="javascript:;" id="personCenter">个人中心</a></dd>
                            <dd><a href="javascript:;" id="myMessage">我的消息<span class="layui-badge-dot"></span></a></dd>
                            <dd th:if="${session.loginUser.identityType == 'EMAIL'}"><a href="javascript:;" id="modifyPass">忘记密码</a></dd>
                            <dd><a href="/login/exit">退出</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="syc">

        <div class="syc-left">
            <a  th:if="${banner.flag == 'LEFT'}" th:each="banner : ${bannerList}" th:href="@{/article/__${banner.articleId}__}">
                <div>
                    <img th:src="${banner.imageUrl}" >
                    <span th:text="${banner.title}"></span>
                </div>
            </a>

        </div>
        <div class="syc-center">
            <div id="gal">
                <nav class="galnav">
                    <ul>
                        <li  th:if="${banner.flag == 'CENTER'}" th:each="banner : ${bannerList}"><input type="radio" name="btn" th:value="${banner.value}" checked="checked" />
                            <label for="btn"></label>
                            <figure>
                                <img th:src="${banner.imageUrl}" />
                                <a th:href="@{/article/__${banner.articleId}__}">
                                    <figcaption>
                                    <h4 th:text="${banner.title}"></h4>
                                    <nav role='navigation'>
                                        <p style="display: none;" th:text="${banner.content}"></p>
                                    </nav>
                                    </figcaption>
                                </a>
                            </figure>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>


        <div class="syc-right">
            <img class="enlargeImg" th:src="${card.avatar}" width="60" height="60">
            <h2 style="font-weight: 600;font-size: 20px;">我的名片</h2>
            <p>网名 ： [[${card.nickname}]]</p>
            <p>职业 ： [[${card.profession}]]</p>
            <p>现居 ： [[${card.addressNow}]]</p>
            <p>爱好 ： [[${card.hobby}]]</p>
            <p>邮箱 ： [[${card.email}]]</p>
            <ul class="card-contact">
                <li><a href="tencent://message/?uin=1481232419&Site=&Menu=yes"><i style="color: blueviolet;" class="layui-icon layui-icon-login-qq"></i></a></li>
                <li id="wechat"><a href="javascript:;"><i style="color: yellowgreen;" class="layui-icon layui-icon-login-wechat"></i></a></li>
                <li id="weibo">
                    <a href="https://juejin.cn/column/6966041052306210823" target="_blank"><svg class="icon" style="font-size: 50px;margin-top: 5px;" aria-hidden="true"><use xlink:href="#layui-extend-juejin"></use></svg>
                </li>
                <li id="email">
                    <a href="https://www.zhihu.com/column/c_1374035444359852032" target="_blank"><svg class="icon" style="font-size: 50px;margin-top: 5px;" aria-hidden="true"><use xlink:href="#layui-extend-zhihu"></use></svg>
                </a></li>
            </ul>
        </div>
    </div>

    <div class="content">
        <div class="content-left">
            <h2>文章<span style="color: red;">推荐</span></h2> <a href="javascript:;" id="select">筛选<i class="layui-icon layui-icon-add-1"></i></a>
            <div id="selectCondition">
                <div>
                    <div id="title-search">
                        <div class="layui-input-inline">
                            <a th:class="${field == '' ? 'active' : ''}"  onclick="" href="javascript:;">默认</a>
                            <a th:class="${field == 'dateInsert' ? 'active' : ''}" field="dateInsert" sort="desc" onclick="" href="javascript:;">发布时间&nbsp;
                                <i th:if="${field != 'dateInsert'}" class="fa fa-arrow-down"></i>
                                <i th:if="${field == 'dateInsert'}" th:class="${sort == 'asc' ? 'fa fa-arrow-up' : 'fa fa-arrow-down'}" class="fa fa-arrow-down"></i>
                            </a>
                            <a th:class="${field == 'browser' ? 'active' : ''}" field="browser" sort="desc" onclick="" href="javascript:;">浏览数&nbsp;
                                <i th:if="${field != 'browser'}" class="fa fa-arrow-down"></i>
                                <i th:if="${field == 'browser'}" th:class="${sort == 'asc' ? 'fa fa-arrow-up' : 'fa fa-arrow-down'}" class="fa fa-arrow-down"></i>
                            </a>
                            <a th:class="${field == 'praise' ? 'active' : ''}" field="praise" sort="desc" onclick="" href="javascript:;">点赞数&nbsp;
                                <i th:if="${field != 'praise'}" class="fa fa-arrow-down"></i>
                                <i th:if="${field == 'praise'}" th:class="${sort == 'asc' ? 'fa fa-arrow-up' : 'fa fa-arrow-down'}" class="fa fa-arrow-down"></i>
                            </a>
                            <a th:class="${field == 'commentCount' ? 'active' : ''}" field="commentCount" sort="desc" onclick="" href="javascript:;">评论数&nbsp;
                                <i th:if="${field != 'commentCount'}" class="fa fa-arrow-down"></i>
                                <i th:if="${field == 'commentCount'}" th:class="${sort == 'asc' ? 'fa fa-arrow-up' : 'fa fa-arrow-down'}" class="fa fa-arrow-down"></i>
                            </a>
                        </div>
                        <div class="layui-input-inline" style="margin-left: 20px;">
                            <input th:value="${keyword}" type="text" id="keyword" placeholder="请输入关键词搜索" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <button id="search" class="layui-btn layui-btn-normal"><i class="layui-icon layui-icon-search"></i></button>
                        </div>

                    </div>
                </div>
                <div id="classify-box">
                    <div class="first-level-box">
                        <div class="first-level">
                            <div th:each="ac : ${articleClassifyList}" class="item">
                                <button
                                        th:data-children-count = "${ac.directChildrenCount}"
                                        th:data-level="${ac.level}"
                                        th:data-id="${ac.id}"
                                    th:onclick="showChildren(this,[[${ac.id}]],[[${ac.directChildrenCount}]]);"
                                    th:class="${ac.directChildrenCount == 0 ?
                                    'layui-btn layui-btn-normal adapter-no-child-normal' :'layui-btn layui-btn-normal'}">[[${ac.name}]]
                                <i th:if="${ac.directChildrenCount != 0}" class="layui-icon layui-icon-triangle-d" style="font-size: 15px;"></i>
                            </button>
                            </div>
                        </div>
                    </div>
                    <div class="child-level-box"></div>
                </div>
            </div>
            <div class="clear"></div>
            <div th:if="${not #lists.isEmpty(articleList)}" th:each="article : ${articleList}" class="article">
                <header>
                    <span th:text="${article.classify.name}"></span><i class="layui-icon layui-icon-triangle-r"></i>
                    <h3><a th:text="${article.title}" th:href="@{/article/__${article.id}__}"></a></h3>
                </header>
                <div class="focus">
                    <a th:href="@{/article/__${article.id}__}" class="focus-a"><img class="picture" th:src="${article.imageUrl}" height="120" width="240"></a>
                </div>
                <div class="note" th:text="${article.description}"></div>
                <p class="auth-span">
                    <span class="muted"><i class="fa fa-user"></i> <a href="javascript:;">孙玉超</a></span>
                    <span class="muted"><i class="fa fa-clock-o"></i> <a href="javascript:;" th:text="${#dates.format(article.dateInsert, 'yyyy-MM-dd')}"></a></span>
                    <span class="muted"><i class="fa fa-eye"></i> <a th:text="${article.browser}" href="javascript:;"></a> 浏览</span>
                    <span class="muted"><i class="fa fa-comment-o"></i> <span th:text="${article.commentCount}"></span> 评论</span>
                    <span class="muted"><i class="layui-icon layui-icon-praise"></i> <span th:text="${article.praise}"></span> 赞</span>
                </p>
            </div>

            <div th:if="${not #lists.isEmpty(articleList)}" class="layui-btn-container">
                <a href="javascript:;" th:onclick="'flipPage(this,'+${page-1}+')' "  th:class="${page == 1 ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-left"></i></a>
                <a href="javascript:;" th:onclick="'flipPage(this,'+${num}+')' "  th:class="${num == page ? 'layui-btn layui-btn-normal pageShow':'layui-btn pageShow'}" th:each="num : ${pageNumList}" th:text="${num}"></a>
                <a href="javascript:;" th:onclick="'flipPage(this,'+${page+1}+')' "  th:class="${page == pageTotal ? 'layui-btn layui-btn-disabled':'layui-btn'}"> <i class="layui-icon layui-icon-right"></i></a>
            </div>
            <div th:if="${#lists.isEmpty(articleList)}">
                <div th:fragment="blank">
                    <div class="blank-wrap"><svg class="icon" style="font-size: 230px;" aria-hidden="true"><use xlink:href="#layui-extend-none"></use></svg></div>
                    <p class="blank-tip">哎呀，暂时还没有该类目的文章</p>
                </div>
            </div>
        </div>
        <div class="content-right">

            <div class="right-card">
                <h3 class="square">最新公告</h3>
                <div>
                    <ul class="notice">
                        <li th:each="notice : ${noticeList}"><a th:href="@{/notice/__${notice.id}__}"> [[${notice.title}]]</a><span th:text="${#dates.format(notice.dateInsert, 'yyyy-MM-dd')}"></span></li>
                    </ul>
                </div>
            </div>
            <div class="right-card">
                <h3 class="square">在线工具</h3>
                <div>
                    <ul class="notice">
                        <li th:each="util : ${onlineUtilsList}"><a th:href="@{http://onlineutils.sunyuchao.com__${util.url}__(bindId=${util.id})}"> [[${util.title}]]</a><span th:text="${#dates.format(util.dateInsert, 'yyyy-MM-dd')}"></span></li>
                    </ul>
                </div>
            </div>
            <div class="right-card">
                <h3 class="square">话题分类</h3>
                <div>
                    <ul id="classify-card" class="flex">
                        <li th:each="ac : ${articleClassifyList}"><a th:data-id="${ac.id}" th:text="${ac.name}" href="javascript:;">技术</a></li>
                    </ul>
                </div>

            </div>
            <div class="right-card">
                <h3 class="square">个人简介</h3>
                <div>
                    <p class="introduction">
                        <img th:src="${card.avatar}" width="80" height="80" align="left"   style="border-radius: 50%;float: left;margin-right:20px;">
                        [[${card.introduction}]]
                    </p>
                </div>
            </div>
            <div class="right-card">
                <h3 class="square">友情链接</h3>
                <div>
                    <ul class="friend">
                        <li th:each="link : ${friendLinkList}"><a target="_blank" th:href="${link.url}" th:text="${link.title}">小鱼儿网</a></li>
                    </ul>
                    <div class="layui-clear"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="footer">
        <p><a href="https://beian.miit.gov.cn/">Design by：暮色妖娆丶 备案号：皖ICP备19018192号-1</a></p>
    </div>


<script src="https://www.sunyuchao.com/static/layui/layui.js"></script>
<script src="https://www.sunyuchao.com/static/js/jquery3.3.1.min.js"></script>
<script th:inline="javascript">
    var isMobile=[[${isMobile}]];
    var classifyId=[[${classifyId}]];
    var field=[[${field}]];
    var keyword=[[${keyword}]];
    if((field != null && field != "") || (classifyId != null && classifyId != "") || (keyword != null && keyword != "")){
        $("#selectCondition").css("display","block");
        $("#select i").removeClass("layui-icon-add-1");
        $("#select i ").addClass(" layui-icon-close");
        $('html,body').animate({ scrollTop: $("#selectCondition").offset().top - 50 }, 0)
    }
    if(classifyId != null && classifyId != ""){ //用户选了分类
        //先拿到当前分类的层级树
        $.ajax({
            url:"/article/classify/selectIdTree",
            type:"GET",
            data:{"id":classifyId},
            success:function (e) {
                var arr = e.split(",");
                for(var i =0;i< arr.length ; i++){
                    if(i == 0){
                        $(".first-level .item button").each(function () {
                            if($(this).attr("data-id") == arr[i]){
                                if($(this).attr("data-children-count") == 0){
                                    $(this).addClass("classify-active");
                                }
                                else{
                                    showChildren($(this),arr[i],1)
                                    return;
                                }
                            }
                        });
                    }

                   else{

                        if(i == arr.length - 1){
                            //选中分类标红
                            var clb = $(".child-level-box").children(".child-level:last-child");
                            var find = $(clb).find("button");
                            for(var j = 0;j<find.length;j++){
                                if($(find[j]).attr("data-id") == arr[i]){
                                    $(find[j]).addClass("classify-active");
                                }
                            }
                        }else{
                            $(".child-level li button").each(function () {
                                if($(this).attr("data-id") == arr[i]){
                                    showChildren($(this),arr[i],1)
                                    return;
                                }
                            });
                        }
                   }

                }
            },dataType:"text"
        });
    }
</script>
<script>
    //按钮搜索
    function keywordSearch(){
        var keyword = $("#keyword").val();
        var sort = "";
        var field = "";
        $("#title-search .layui-input-inline a").each(function () {
            if($(this).hasClass("active") && $(this).html() != "默认"){
                sort = $(this).attr("sort")
                field = $(this).attr("field")
            }
        });
        var classifyId = "";
        $(".child-level-box .child-level button").each(function () {
            if($(this).hasClass("classify-active")){
                classifyId = $(this).attr("data-id");
            }
        });
        indexQuery(keyword,field,sort,classifyId,1);
    }

    //文本框回车
    $("#keyword").keypress(function (e) {
        if (e.which == 13) {
            keywordSearch();
        }
    });

    $("#search").click(function () {
        keywordSearch();
    });

    function indexQuery(keyword,field,sort,classifyId,page){
        document.write("<form action='/' method='post' name='form1' style='display:none'>");
        document.write("<input type='hidden' name='field' value='"+field+"'>");
        document.write("<input type='hidden' name='sort' value='"+sort+"'>");
        document.write("<input type='hidden' name='keyword' value='"+keyword+"'>");
        document.write("<input type='hidden' name='classifyId' value='"+classifyId+"'>");
        document.write("<input type='hidden' name='page' value='"+page+"'>");
        document.write("</form>");
        document.form1.submit();
    }
    /**
     *排序选项点击
     * */
    $("#title-search .layui-input-inline a").click(function () {
        //如果已经激活，改变箭头
        if($(this).hasClass("active") && $(this).html() != "默认"){
            var attr = $(this).children("i").hasClass("fa-arrow-down")
            if(attr){
                $(this).attr("sort","asc")
            }else{
                $(this).attr("sort",attr ? "asc":"desc")
            }
        }
        var sort = $(this).attr("sort")
        var field = $(this).attr("field")
        if($(this).html() == "默认"){
            field  = "";
            sort  = "";
        }
        var keyword = $("#keyword").val();
        var classifyId = "" ;
        $(".child-level-box .child-level button").each(function () {
            if($(this).hasClass("classify-active")){
                classifyId = $(this).attr("data-id");
            }
        });
        indexQuery(keyword,field,sort,classifyId,1);
    });

    //子分类
    function showChildren(obj,id,directChildrenCount){

        if(directChildrenCount > 0){  //展开子元素
            var attr = parseInt($(obj).attr("data-level"))-1;//这个level是child-level的索引
            $(".child-level").each(function (i) {
                if(i >= attr){
                    $(this).remove();
                }
            })

            $(obj).children("i").removeClass("layui-icon-triangle-d");
            $(obj).children("i").addClass("layui-icon-triangle-r");
            $.ajax({
                url:"/article/classify/selectByParentId",
                type:"GET",
                async:false,
                data:{"id":id},
                success:function (e) {
                    var start  ='<div class="child-level"><ul>';
                    var end = '</ul></div>';
                    var content = "";
                    for(var i = 0;i<e.length;i++){
                        var item = "";
                        if(e[i].directChildrenCount == 0){
                             item = '<li> <button data-id="'+e[i].id+'" onclick="showChildren(this,'+e[i].id+','+e[i].directChildrenCount+')" class="layui-btn layui-btn-sm">'+e[i].name+'</button></li>';
                        }else{
                             item = '<li> <button data-id="'+e[i].id+'" data-level="'+e[i].level+'" onclick="showChildren(this,'+e[i].id+','+e[i].directChildrenCount+')" class="layui-btn layui-btn-sm">'+e[i].name+'<i class="layui-icon layui-icon-triangle-d" style="font-size: 10px;"></i></button></li>';
                        }
                        content = content+item;
                    }
                    $(".child-level-box").append(start+content+end);
                },dataType:"json"
            });
        }else{
            //已经标红
            if($(obj).hasClass("classify-active")){
                return;
            }
            var sort="";
            var field="";
            $("#title-search .layui-input-inline a").each(function () {
                if($(this).hasClass("active") && $(this).html() != "默认"){
                     sort = $(this).attr("sort")
                     field = $(this).attr("field")
                }
            })
            var keyword = $("#keyword").val();
            indexQuery(keyword,field,sort,id,1);
        }
    }

    //图片点击
    $(".enlargeImg").click(function() {
        $(this).after("<div οnclick='closeImg()' class='enlargeImg_wrapper'></div>");
        var imgSrc = $(this).attr('src');
        $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");
        $('.enlargeImg_wrapper').fadeIn(200);
    });
    $(document).on('click','.enlargeImg_wrapper',function(){
        $('.enlargeImg_wrapper').fadeOut(600);
    });

    //随机颜色
    var colorArr=["#ffda79","#1E9FFF","#fab1a0","#74b9ff","#e84393","#00b894","#FFB800"];
    $("#classify-card li").each(function () {
        var number= Math.floor(Math.random() * (colorArr.length -1));
        $(this).css("background-color",colorArr[number]);
        delete colorArr[number];
        colorArr=colorArr.filter(function (e) {
            return e;
        });
    });

    $("#classify-card li a").click(function () {
        var id = $(this).attr("data-id");
        document.write("<form action='/' method='post' name='form1' style='display:none'>");
        document.write("<input type='hidden' name='page' value='"+1+"'>");
        document.write("<input type='hidden' name='parentId' value='"+id+"'>");
        document.write("</form>");
        document.form1.submit();
    });

    //翻页
    function flipPage(obj,page) {
        if($(obj).hasClass("layui-btn-disabled")){
            return;
        }
        var keyword = $("#keyword").val();
        var sort = "";
        var field = "";
        $("#title-search .layui-input-inline a").each(function () {
            if($(this).hasClass("active") && $(this).html() != "默认"){
                sort = $(this).attr("sort")
                field = $(this).attr("field")
            }
        });
        var classifyId = "";
        $(".child-level-box .child-level button").each(function () {
            if($(this).hasClass("classify-active")){
                classifyId = $(this).attr("data-id");
            }
        });
        indexQuery(keyword,field,sort,classifyId,page);
    }




    layui.config({base:'https://www.sunyuchao.com/static/layui/extends/'});
    layui.use(['layer','element'],function () {
        var layer=layui.layer,
            element=layui.element,
            $=layui.jquery;
        if(isMobile != null){
            layer.alert("移动端暂时未做较好的页面适配，建议使用PC端访问");
        }


        layer.tips('文章筛选在这里！', '#select', {
            tips: [1, '#3595CC'],
            time: 4000
        });

        var tips;
        $("#wechat").mouseover(function () {
            tips = layer.tips("<img width='100' height='100' src='https://www.sunyuchao.com/static/images/wechat.jpg'>","#wechat",{ tips: [1, '#3595CC'],time:0});
        });
        $("#wechat").mouseout(function () {
            layer.close(tips);
        });



        /*点击筛选*/
        $("#select").click(function () {
            var child = $(this).children()[0];
            var open="layui-icon-add-1";
            var close="layui-icon-close";
            if($(child).hasClass(open)){
                $(child).removeClass(open);
                $(child).addClass(close);
                $("#selectCondition").slideDown();
            }else{
                $(child).removeClass(close);
                $(child).addClass(open);
                $("#selectCondition").slideUp();
            }

        });

        //文章底部页数过大隐藏部分页数
        let totalPage = $(".pageShow").length;//总页数
        $(".pageShow").each(function (){
            if($(this).hasClass("layui-btn-normal")){
                let number = parseInt($(this).html());
                if(number <= 4){
                    //除了最后一页,大于 3/5 * totalPage 的都隐藏，倒数第二页设置为 ...
                    $(".pageShow").each(function (index,element){
                        if(index + 1 > totalPage * 3/5 && index + 1 < totalPage - 1){
                            $(this).hide();
                        } else if(index === totalPage - 2){
                            $(this).html("...");
                            $(this).attr('onclick',"none");
                        }
                    });
                } else if (number >=5 && number <= totalPage - 4){
                    $(".pageShow").each(function (index,element){
                        if(index+1 <= number - 4 && index != 0 && index != 1){
                            $(this).hide();
                        }
                        if(index+1 >= number + 4 && index != totalPage - 1 && index != totalPage - 2){
                            $(this).hide();
                        }
                        if(index == 1 || index == totalPage - 2){
                            $(this).html("...");
                            $(this).attr('onclick',"none");
                        }
                    });
                } else if (number > totalPage - 4){
                    $(".pageShow").each(function (index,element){

                        if(index + 1 < totalPage - 4 && index != 1 && index != 0){
                            $(this).hide();
                        }
                        if(index == 1){
                            $(this).html("...");
                            $(this).attr('onclick',"none");
                        }
                    });
                }
            }
        });

    });
</script>
<!--网页点击爱心-->
<script src="https://www.sunyuchao.com/static/js/jquery3.3.1.min.js"></script>
<script>
    /*鼠标滚动时候，文章列表渐渐显示*/
    $(window).scroll(function () {
        $('.article').each(function (obj) {
            if ($(this).offset().top < $(window).height()) {

            } else {
                if (($(window).height() + $(document).scrollTop()) >= $(this).offset().top +20) {
                    $(this).addClass('animated fadeInUp');
                }
            }

        })

    });

    /**
     * 轮播自动执行
     * */
    var i = 1;
    var timer ;
    var scroll=function(){
        timer=setInterval(function () {
            $("input[name=btn]").eq(i).click();
            i++;
            if(i==$("input[name=btn]").length){ //执行到最后一个的时候重来
                i=0;
            }
        },5000);
    };
    scroll();
    $(".syc-center").mouseover(function () {
        clearInterval(timer)
    });

    $(".syc-center").mouseout(function () {
        scroll();
    });
</script>
<script src="https://www.sunyuchao.com/static/js/heart.js"></script>
<script src="https://www.sunyuchao.com/static/js/common.js"></script>

</body>
</html>